<template>
  <main class="main-container">
    <div class="content-container">
      <h2>注册一个新的设备保养项目</h2>
      <div style="margin-top: 20px">
        <div style="margin-top: 10px">
          <el-text>设备逻辑名称：</el-text>
          <el-input
            style="margin-top: 4px"
            maxlength="20"
            type="text"
            placeholder="请输入一个设备逻辑名"
            v-model="projectName"
          ></el-input>
        </div>
        <div style="margin-top: 10px">
          <el-text>设备逻辑名称：</el-text>
          <el-input
            style="margin-top: 4px"
            maxlength="20"
            type="number"
            placeholder="请输入一个设备逻辑名"
            v-model="site"
          ></el-input>
        </div>
        <div style="margin-top: 20px; display: flex; justify-content: center">
          <el-button type="primary" @click="onRegister">注册</el-button>
        </div>
      </div>
    </div>
  </main>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { registerAsync } from '@/api/axios/device-maintenance-client'
import { ElMessage } from 'element-plus'

const projectName = ref('')
const site = ref<number | null>(null)

async function onRegister() {
  if (site.value == null) {
    ElMessage.error('请输入站点！')
  } else if (projectName.value == '' || projectName.value == null || projectName.value.length < 6) {
    ElMessage.error('项目名称长度必须大于6个字符！')
  } else {
    let result = await registerAsync({
      projectName: projectName.value,
      site: site.value
    })

    if (result.isSuccess) {
      ElMessage.success('项目注册成功！')
    } else {
      ElMessage.error(result.message)
    }
  }
}
</script>

<style scoped>
.main-container {
  height: 100%;
  width: 100%;
  display: flex;
}

.content-container {
  height: 100%;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
